<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="项目名称">
              <j-input placeholder="" v-model="queryParam.projectName"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="项目ID">
              <j-input placeholder="" v-model="queryParam.id"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-button type="primary" icon="search" @click="searchQuery">搜索</a-button>
            <a-button type="primary" @click="addTenantProject" style="margin-left: 8px" v-if="is_super_tenant || login_tenant!=tenantId" v-has="'tenantProject:add'">分配项目</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange">
      <span slot="action" slot-scope="text, record" v-if="is_super_tenant || login_tenant!=tenantId">
        <a-popconfirm title="确定删除项目吗?" @confirm="() =>deleteTenantProject(record)">
          <a :disabled="isDisabledAuth('tenantProject:delete')">删除</a>
        </a-popconfirm>
      </span>
    </a-table>
    <tenant-project-modal ref="tenantProjectAdd" @projectReload="returnTenantProject"></tenant-project-modal>
  </a-card>

</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import TenantProjectModal from './modules/TenantProjectModal.vue'
  import { api } from './service'
  import { TENANT_ID, IS_SUPER_TENANT } from '@/store/mutation-types';
  import Vue from 'vue';
  import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'

  export default {
    name: 'TenantProject',
    mixins: [JeecgListMixin, DisabledAuthFilterMixin],
    components: {
      TenantProjectModal
    },
    created() {
      this.tenantId = this.$route.params.tenantId;
      if (!this.tenantId) {
        window.location.href = '/#/tenants/children'
        window.location.reload()
      } else {
        this.url.list = api.list(this.tenantId);
        this.searchQuery();
      }
    },
    data () {
      let that = this;
      return {
        disableMixinCreated: true,

        tenantId: '',

        is_super_tenant: Vue.ls.get(IS_SUPER_TENANT),
        login_tenant: Vue.ls.get(TENANT_ID),

        // 表头
        columns: [],

        url: {
          delete: ''
        }
      }
    },
    watch: {
      tenantId() {
        let that = this;
        if (that.is_super_tenant || that.login_tenant != this.tenantId) {
          that.columns = [
            {
              title: '#',
              align: 'center',
              dataIndex: 'rowIndex',
              width: 60,
              customRender: function (t, r, index) {
                return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
              }
            }, {
              title: '项目ID',
              dataIndex: 'id',
              width: 100
            }, {
              title: '项目名称',
              dataIndex: 'projectName'
            }, {
              title: '操作',
              dataIndex: 'action',
              align: 'center',
              fixed: 'right',
              width: 147,
              scopedSlots: { customRender: 'action' }
            }
          ]
        } else {
          that.columns = [
            {
              title: '序号',
              align: 'center',
              dataIndex: 'rowIndex',
              width: 80,
              customRender: function (t, r, index) {
                return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
              }
            }, {
              title: '项目Id',
              align: 'center',
              dataIndex: 'id',
              width: 100
            },
            {
              title: '项目名称',
              dataIndex: 'projectName'
            }
          ]
        }
      }
    },
    methods: {
      addTenantProject () {
        this.$refs.tenantProjectAdd.show(this.tenantId);
      },
      returnTenantProject() {
        this.searchQuery();
      },
      deleteTenantProject(record) {
        this.url.delete = api.delete(this.tenantId, record.id);
        this.handleDelete(record.id);
      }
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';
</style>
